<template>
	<div>
		<title>使用Vue过渡实现动画效果</title>
		<button @click="isShow = !isShow">显示/隐藏</button>
		<!-- vue过渡实现动画效果，动画组transition-group，设置唯一key，用户虚拟DOM对比 -->
		<transition-group name="hello" appear>
			<h1 v-show="!isShow" key="1">你好啊！</h1>
			<h1 v-show="isShow" key="2">openVueCli！</h1>
		</transition-group>
	</div>
</template>

<script>
	export default {
		name:'Test',
		data() {
			return {
				isShow:true
			}
		},
	}
</script>

<style scoped>
	h1{
		background-color: orange;
	}
	/* 进入的起点、离开的终点，轮回 */
	.hello-enter,.hello-leave-to{
		transform: translateX(-100%);
	}
	/* 来的过程，离开的过程，设置动画执行时间，匀速linear */
	.hello-enter-active,.hello-leave-active{
		transition: 0.5s linear;
	}
	/* 进入的终点、离开的起点，轮回  */
	.hello-enter-to,.hello-leave{
		transform: translateX(0);
	}

</style>